<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书管理系统</title>
  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/jquery.cookie.min.js"></script>
  <script src="js/nav.js"></script>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- 引入图标 -->
  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">   
  <link rel="stylesheet" href="css/nav.css">
  <style>
    *{
      margin: 0;
      padding: 0;
    }
  .tab-content{
    height: 600px;
    width: 100%;
    /* background-color: rgb(168, 34, 34); */

  }
  .function-area{
    position: relative;
    float: left;
    height: 600px;
    width: 50%;
    /* background-color: aqua; */
  }
  .function-area input{
    width: 300px;
  }
  .note-area{
    position: relative;
    float: left;
    height: 600px;
    width: 50%;
    /* background-color: bisque; */
  }
  .info-box{
    background-color: rgb(243, 243, 243);
    height: 50px;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    line-height: 30px;
    transition: all;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-duration: 1s;
  }
  .info-box:hover{
    box-shadow: 10px 10px 10px gray;
    background-color: #f8f9fa;
  }
  </style>
</head>
<body>
  <!-- 页面导航 -->
  <nav>
    <ul class="nav justify-content-center nav-pills">
      <li class="nav-item">
        <a class="nav-link " href="index.html">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="search.html">查询</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="borrow.html">借书</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="return.html">归还</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="person.html">个人信息</a>
      </li>
    </ul>
  </nav>

  <div class="container">
    <!-- 功能导航栏 -->
    <br><br>
    <!-- 选项卡 -->
    <div>
      <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">我的信息</a>
        <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">修改用户信息</a>
 
      </div>
    </div>
    <!-- 选项卡控制的区域 -->
    <div class="tab-content" id="nav-tabContent">
      <!-- 选项卡一：添加用户 -->
      <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
        <br>
        <h3>我的信息</h3>
        <br>
        <div class="user-info" >
          <!-- <div class="info-box">id:54563214212</div>
          <div class="info-box">您的名讳：张三</div>
          <div class="info-box">您的账户状态：正常</div>
          <div class="info-box">区域：长江大学党委组织部</div>
          <div class="info-box">您可借书籍本书：30</div>
          <div class="info-box">您可借书籍天数：100</div>
          <div class="info-box">您的密码：*********</div> -->
        </div>
      </div>
      <!-- 选项卡二：修改用户信息 -->
      <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
        <br>
        <h3>修改我的信息</h3>
        <br>
        <div class="function-area">
          <div class="form-group">
            <label for="name">您的新密码：</label>
            <span class="badge badge-primary">必填</span>
            <input type="text" class="form-control" id="name" aria-describedby="emailHelp" placeholder="输入密码">
            <br>
            <label for="name">QQ:</label>
            <input type="text" class="form-control" id="name" aria-describedby="emailHelp" placeholder="输入QQ">
          </div>
        </div>
        <div class="note-area">
          <div style="height: 50%;">
            <h4>注意事项</h4>
            <br>
            <p>1、您可以修改您的密码以及QQ等信息，其余信息您可以联系管理员</p>
            <!-- <p>2、用户区域号请查询学校各部门所属区号</p> -->
            <p>2、用户信息默认有效时间为4年，如因保研、学制延长、延毕等原因导致使用时限变长，须再次激活</p>
          </div>
          <div>
            <button id="modify-submit-btn" type="button" class="btn btn-lg btn-primary">提交修改</button>
          </div>
        </div>

        </div>
      </div>
  </div>

  <script>
    $(document).ready(function(){
      var userInfo=JSON.parse(sessionStorage.getItem('userInfo')) 
      if(userInfo===undefined){
        alert("您的信息不正确，请重新登录")
        return;
      }
      console.log(userInfo);
      var html=`
          <div class="info-box">id:${userInfo.reader.rdId}</div>
          <div class="info-box">您的名讳：${userInfo.reader.rdName}</div>
          <div class="info-box">您的账户状态：${userInfo.reader.rdState===0?'正常':'异常'}</div>
          <div class="info-box">区域：${userInfo.reader.rdDept}</div>
          <div class="info-box">您可借书籍本书：${userInfo.readerType.canLendQty}</div>
          <div class="info-box">您可借书籍天数：${userInfo.readerType.canLendDay}</div>
          <div class="info-box">您的密码：*********</div>
      `
      $('.user-info').append(html)
    })


    $('.modify-submit-btn').click(function(){

    })
  </script>
</body>
</html>